<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车界面</title>
    <style>
        .cart {
            width: 300px;
            margin: auto;
        }

        .title {
            text-align: center;
            background-color: aqua;
            line-height: 40px;
            height: 40px;
        }

        /* 书写主体区域的样式 */
        .cart .good {
            height: 55px;
            line-height: 55px;
            border-top: 1px solid #ccc;
            position: relative;
        }

        .cart .good img {
            width: 40px;
            height: 40px;
            margin: 5px;
        }

        .cart .good .name {
            position: absolute;
            width: 90px;
            top: 0;
            left: 45px;
            font-size: 16px;
        }

        .cart .good .change {
            position: absolute;
            width: 90px;
            top: 0;
            right: 50px;
        }

        .cart .good .change a {
            text-decoration: none;
            font-size: 20px;
            vertical-align: middle;
            width: 30px;
            background-color: lightgray;
        }

        .cart .good .change input {
            width: 40px;
            height: 25px;
            text-align: center;
        }

        .cart .good .delete {
            position: absolute;
            top: 6px;
            ;
            right: 0;
            width: 40px;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            font-size: 24px;
            color: red;
        }

        .cart .good .del:hover {
            background-color: #f40;
        }

        /* 总价界面 */
        .cart .total {
            background-color: #FFCE46;
            height: 50px;
            line-height: 50px;
            text-align: right;
        }

        .cart .total button {
            margin: 0 10px;
            height: 35px;
            width: 80px;
            border-radius: 4px;
            border: 0;
            background-color: #dc4c;
        }
    </style>
</head>

<body>
    <script src="./Vue.js"></script>

    <div id="app">
        <my-cart></my-cart>
    </div>

    <script>
        // 定义一个eventBus
        // 定义组件的描述
        const cartTitle = {
            template: `<div class="title">{{username}}的购物车</div>`,
            props: ["username"]
        };
        const cartList = {
            template: `
            <div>
                <div class="good" v-for="good in goods" :key="good.id">
                    <img src="" />
                    <div class = "name">{{good.name}}</div>
                    <div class = "change">
                        <a href="" @click.prevent="decrease(good)">-</a>
                        <input type="text" class="num" v-model="good.num"/>
                        <a href="" @click.prevent="increase(good)">+</a>
                    </div>
                    <div class = "delete" @click="handelDelete(good.id)">
                        ×
                    </div>
                </div>
            </div>`,
            props: ["goods"],
            methods: {
                // 删除商品
                handelDelete(id) {
                    const index = this.goods.findIndex(item => {
                        return item.id === id;
                    });
                    this.goods.splice(index, 1);
                },
                increase(item) {
                    // 这样也行，很奇怪
                    // item.num ++;
                    this.$emit('change-num', {
                        type: 'add',
                        id: item.id
                    })
                },
                decrease(item) {
                    // 这样也行，很奇怪
                    // item.num --;
                    this.$emit('change-num', {
                        type: 'add',
                        id: item.id
                    })
                }
            }
        };
        const cartTotal = {
            template:
                `
            <div class="total">
                <span>总价：{{getTotal}}</span>
                <button>去支付</button>
            </div>
            `,
            props: ["goods"],
            computed: {
                getTotal() {
                    let sum = 0;
                    this.goods.forEach(element => {
                        sum += element.price * element.num;
                    });
                    return sum;
                }
            }
        };
        // 定义根组件
        Vue.component('my-cart', {
            template: `
                <div class="cart">
                    <cart-title :username="username" ></cart-title>
                    <cart-list :goods="goods" @change-num="changeNum"></cart-list>
                    <cart-total :goods="goods" ></cart-total>
                </div>
            `,
            data() {
                return {
                    username: 'zx',
                    goods: [
                        {
                            id: 1,
                            picUrl: '',
                            goodName: 'Iphone12',
                            num: 1,
                            price: 20
                        },
                        {
                            id: 2,
                            picUrl: '',
                            goodName: 'Iphone13',
                            num: 2,
                            price: 30
                        },
                        {
                            id: 3,
                            picUrl: '',
                            goodName: 'Iphone14',
                            num: 3,
                            price: 50
                        }
                    ],
                }
            },
            components: {
                'cart-title': cartTitle,
                'cart-list': cartList,
                'cart-total': cartTotal
            },
            methods: {
                changeNum(param) {
                    this.goods.some(item => {
                        if (item.id === param.id) {
                            if (param.type == 'add') {
                                item.num++;
                            } else {
                                item.num--;
                            }
                        }
                    })
                }
            }
        })
        const vm = new Vue({
            el: '#app'
        });
    </script>
</body>

</html>